  <template>
  <div id="bg">
    <div id= "input" style= "padding:50px 50px;">
        <p style= "text-align:center;color:black;font-size:30px;padding-bottom:100px">签到</p>



        <el-form :model= "attendance" :rules = "rules" ref= "attendanceForm"> 
    <el-form-item prop= "stuId" >
        <el-input  size= "large"  placeholder= "请输入学号" v-model= "attendance.stuId" prefix-icon="el-icon-s-custom"></el-input>
    </el-form-item>
    <el-form-item prop= "stuName" >
        <el-input  size= "large"  placeholder= "请输入姓名" v-model= "attendance.stuName" prefix-icon="el-icon-s-custom"></el-input>
    </el-form-item>
            </el-form> 
                  
      <div>
      <br/>
        <el-button size="large" type="success" plain  style= "padding:15px 160px" aria-autocomplete="off" @click= "submitForm('attendanceForm')">验证</el-button>
      </div><!--aria-autocomplete表示是否给用户提供文本框自动提示-->




    </div>
  </div>  
  </template>
<script>
export default {
name:"stu-clock-in",
data(){
    return{
        attendance:{
            stuId:null,
            stuName:''
        },
        rules:{
        stuId: [
            { required: true, message: '请输入学号', trigger: 'blur' },//blur表示鼠标失焦的时候会触发提示
            { min: 2, max: 10, message: '长度在 2 到 10 个字符之间', trigger: 'blur' }
          ],
        stuName:[
          { required: true, message: '请输入学生姓名', trigger: 'blur' },//blur表示鼠标失焦的时候会触发提示
            { min: 2, max: 20, message: '长度在2到20个字符之间', trigger: 'blur' }
        ]
      }
    }
    
},
methods:{
submitForm(fromName){
        //先校验表单是否合法，不合法就不发出去
        this.$refs['attendanceForm'].validate((valid) => {
          if (valid) {
        //合法，发出表单执行登录操作
         
        this.request.post("http://localhost:8081/attendance/clock-in",this.attendance).then(res=>{
          if(res.flag=='200'){
            this.$message.success("签到打卡成功！")   
            
          }
          else{
            this.$message.error(res.msg)
          }

        })
          } 
        });

      }
}


 
}
</script>
<style>
#bg{
background: 
url("../assets/clockIn_bg.jpg");
width:100%;
height:100%;
position: fixed;
background-size: 100% 100%;
}
#input{
background-color: rgba(46, 72, 219, 0);
width:435px;
height:420px;
position:absolute;
top:  150px;
left: 550px;


}
</style>